<template>
    <!-- 修改资料 -->
    <div>
        <!-- 内容主题区域 -->
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules">
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="申请日期" prop="applyDate">
                        <el-date-picker v-model="form.applyDate" value-format="YYYY-MM-DD"  placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="申请人" prop="employeeId">
                        <ts-select v-model="form.employeeId" :fileName="employeeFileName" :template="tableProps"
                            :label="form.employeeName" @updateRow="employeeChange"></ts-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="部门名称">
                        <el-input v-model="form.deptName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="部门主管姓名" prop="leader">
                        <el-input v-model="form.leader" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="受款人" prop="receiver">
                        <el-input v-model="form.receiver"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="申请金额" prop="applyAmount">
                        <el-input-number v-model="form.applyAmount" :min="0"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="预计归还日期" prop="expectedReturnDate">
                        <el-date-picker v-model="form.expectedReturnDate" value-format="YYYY-MM-DD" placeholder="请选择" />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                    <el-form-item label="科目" prop="subjects">
                        <el-select v-model="form.subjectsArray" placeholder="请选择" multiple>
                            <el-option v-for="item in configData.subjectsList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item prop="remark" label="申请事由">
                <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
        </el-form>
        <div class="button-position">
            <el-button @click="updateVisible">取 消</el-button>
            <el-button type="primary" @click="addcodekind(formRef)">确 定</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import { Check, Close } from '@element-plus/icons-vue';
import Api from '@/api/model/trip.js'
import tsSelect from '@/components/scSelect/index.vue'
const emit = defineEmits(['updatetable','openDialog'])
// 添加用户数据的对象
const form = ref({
});
const configData = ref({})
const formRef = ref()
const employeeFileName = ref('ChooseEmployeeReport')
const tableProps = {
    label: 'name',
    value: 'id',
}
onMounted(() => {
    getInit()
})

const getInit = async () => {
    let formRes = await Api.applyCost.add.post()
    if (formRes.code == 200) {
        form.value = formRes.data
        configData.value = formRes.configData
        form.value.receiver = form.value.employeeName
    }
}

const employeeChange = (val) => {
    console.log(val)
    form.value.deptName = val.deptName
    form.value.leader = val.leader
    form.value.employeeName = val.name
    form.value.deptId = val.deptId
    form.value.receiver = val.name
    form.value.leaderId = val.leaderId
}
const restAddFormData = () => {
    formRef.value.resetFields();
}

const updateVisible = (val) => {
    emit('updatetable')
}


// 上传
const addcodekind = async (formRef) => {
    await formRef.validate((valid, fields) => {
        if (valid) {
            addcodekindData();
        }
    })
}

const addcodekindData = async () => {
    var params = {
        bean: form.value,
    }
    var res = await Api.applyCost.save.post(params);
    if (res.code == 200) {
        restAddFormData()
        ElNotification.success({ title: '', message: '添加成功！', duration: 2000 });
        emit('updatetable', true)
        emit('openDialog',res.submitWorkFlowData)
    }
}

</script>

<style lang="less" scoped>
.el-dialog__wrapper {
    pointer-events: none;
}

.el-dialog {
    pointer-events: auto;
}
</style>

